<!DOCTYPE html>
<html lang="en">
    
    <head>
        <META charset="utf-8">

        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
        <![endif]-->

        <link type="text/css" href="jquery/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery/js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="jquery/js/jquery-ui-1.8.16.custom.min.js"></script>
        
        <script type="text/javascript" src="xmpp_components/strophe/strophe.js"></script>
        <script type="text/javascript" src="xmpp_components/strophe/flXHR.js"></script>
        <script type="text/javascript" src="xmpp_components/strophe/strophe.flxhr.js"></script>

        <link type="text/css" href="ui_components/menubar/menubar.css" rel="stylesheet" />
        
        <link type="text/css" href="ui_components/waitcursor/css/showLoading.css" rel="stylesheet" />
        <script type="text/javascript" src="ui_components/waitcursor/js/jquery.showLoading.js"></script>
    
        <script type="text/javascript" src="gchat-main.js"></script>
        <link type="text/css" href="gchat-main.css" rel="stylesheet" />        
 
        <title>gChat</title>
    </head>

    <body>
        <header>
            <div id="menubar" class="menubar">
                <ul>
                    <li><a href="#" menu="popupmenu_application">Application</a></li>
                    <li><a href="#" menu="popupmenu_accounts">Accounts</a></li>
                    <li><a href="#" menu="popupmenu_about">About</a></li>
                </ul>
            </div>
        </header>
        
        <section id="main">
            <!-- Menu accordion -->
            <div id="left_pane">
                <h2 class="widgetHeaders">Status</h2>
                <div id="main_accordion">
                    <div>
                        <h3><a href="#">Account Connection:</a></h3>
                        <div>
                            <div id="connection_create">
                                <span id="login_title">Enter to login:</span>
                                <br/>
                                <input id="username" type="text" placeholder="Your Jabber user name here" autofocus/>
                                <br/>
                                <input id="password" type="password" placeholder="Your Jabber passowrd here"/>
                                <br/>
                                <button id="xmpp_connect">Connect</button>
                            </div>
                            <div id="connection_destroy">
                                <span id="logout_title">You are logged in:</span>
                                <br/>
                                <button id="xmpp_disconnect">Disconnect</button>
                            </div>  
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Personal status:</a></h3>
                        <div>Personal status form here</div>
                    </div>
                    <div>
                        <h3><a href="#">Buddies:</a></h3>
                        <div>List of buddies here</div>
                    </div>
                </div>
            </div>

            <!-- Main section tabs -->
            <div id="right_pane">
                <h2 class="widgetHeaders">Communications</h2>
                <div id="main_tabs">
                    <ul>
                        <li><a href="#tabs-1">Welcome</a></li>
                    </ul>
                    <div id="tabs-1">Welcome to gChat page here</div>
                </div>
            </div>
        </section>
		
        <section id="popupmenus">
            <div  id="popupmenu_application" class="popupmenu">
                <ul>
                    <li><a href="#">Exit</a></li>
                </ul>
            </div>

            <div id="popupmenu_accounts" class="popupmenu" >
                <ul>
                    <li><a href="#">Create</a></li>
                    <li><a href="#">Delete</a></li>
                    <li><a href="#">Log in</a></li>
                    <li><a href="#">Log out</a></li>
                </ul>
            </div>

            <div id="popupmenu_about" class="popupmenu" >
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Help</a></li>
                </ul>
            </div>
        </section>

    <script type="text/javascript" src="ui_components/menubar/menubar.js"></script>
    </body>
</html>


